<template>
    <Editor :id="tinymceId" v-model="tinymceHtml" :init="init"></Editor>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
import 'tinymce/icons/default/icons'
// 引入富文本编辑器主题的js和css
import 'tinymce/themes/silver/theme'
import 'tinymce/skins/ui/oxide/skin.min.css'
//扩展插件
//插入图片
import 'tinymce/plugins/image'
//链接
import 'tinymce/plugins/link';
//文字格式
import 'tinymce/plugins/code';
//表格插入
import 'tinymce/plugins/table';
//高级列表插件
import 'tinymce/plugins/lists';
//表情插件
import 'tinymce/plugins/emoticons'
// 字数统计插件
import 'tinymce/plugins/wordcount'; 
// 插入视频插件
import 'tinymce/plugins/media';
// 模板插件
import 'tinymce/plugins/template';
//粘贴
import 'tinymce/plugins/paste';
//预览
import 'tinymce/plugins/preview';
//上下文菜单
import 'tinymce/plugins/contextmenu';
//文字颜色
import 'tinymce/plugins/textcolor';
//全屏
import 'tinymce/plugins/fullscreen';
//查找替换 
import 'tinymce/plugins/searchreplace';

export default {
    name: 'tinymce-comp',
    components: {Editor},
    props:{
        tinymceId:{
            type:String,
            default:'tinymceId'
        },//使用不同id,防止缓存
        height:{
            type:Number,
            default:400,
        },
        plugins:{
            type:String,
            default:'link lists image code table emoticons wordcount media fullscreen preview paste contextmenu textcolor fullscreen searchreplace',
        },
        toolbar:{
            type:String,
            default:'fontselect | bold italic underline strikethrough | link unlink image emoticons | undo redo | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | code | searchreplace removeformat fullscreen'
        },
        previewWidth:{
            type:Number,
            default:400
        },
        previewHeight:{
            type:Number,
            default:750
        }
    },
    data() {
        return {
            tinymceHtml: '',
            init: {
                placeholder:'请输入',
                language_url: "/tinymce/zh_CN.js",
                language: "zh_CN",
                //皮肤主题
                skin_url: "/tinymce/skins/ui/oxide",
                //编辑区的css文件地址
                content_css: "/tinymce/skins/content/default/content.css",
                //富文本高度
                height: this.height,
                //编辑区css样式
                content_style: '* { padding:0; margin:0; } img {max-width:100% !important }',
                // 预览宽度
                plugin_preview_width: this.previewWidth,
                plugin_preview_height: this.previewHeight,
                lineheight_val: "1 1.1 1.2 1.3 1.35 1.4 1.5 1.55 1.6 1.75 1.8 1.9 1.95 2 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 3 3.1 3.2 3.3 3.4 4 5",
                //字体
                fontsize_formats: "8pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt 17pt 18pt 24pt 36pt",
                font_formats:"微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",
                //插件
                plugins: this.plugins,
                powerpaste_word_import: 'merge',
                toolbar: this.toolbar,
                paste_data_images: true,
                // 底部的状态栏
                statusbar: true, 
                // 最上方的菜单
                menubar: true, 
                // 水印“Powered by TinyMCE”
                branding: false, 
                //默认表情列表文件地址
                emoticons_database_url:'/tinymce/emojis.js',
                
            }
        }
    },
    mounted() {
        tinymce.init({});
    },
}
</script>